@charset "UTF-8";
html,body {
  width: 100%;
  height: 100%;
  font-family: 'Microsoft YaHei';
  background-color: #ebebeb;
}
img {
  width: 100%;
}
/*超出显示省略号*/
.ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*隐藏滚动条*/
::-webkit-scrollbar { display: none }
//定义通用变量
//单位转换
@vw: 750/100vw;
@vh: 1092/100vh;
/*字体*/
@fs24: 24/@vw;
@fs32: 32/@vw;
/*函数*/
.vw-w-h(@num1,@num2) {
  width: @num1/@vw;
  height: @num2/@vw;
}
.translateX() {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.translateY() {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.translate() {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.box-sizing() {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.flex() {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
.flex-x() {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
}
.flex-y() {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
}

/*swiper*/
.swiper-pagination-bullet {
  width: 16/@vw;
  height: 16/@vw;
}
.swiper-pagination-bullet-active {
  background-color: #DEBc57;
}

/*首页*/
.main {
  width: 100%;
  padding-bottom: 98/@vw;
  .header {
    .swiper1 .swiper-wrapper .swiper-slide a {
      display: block;
      img {
        height: 366/@vw;
      }
    }
    .news {
      width: 100%;
      height: 88/@vw;
      background-color: #ffffff;
      overflow: hidden;
      .flex();
      .news-center {
        .vw-w-h(690,70);
        line-height: 70/@vw;
        background-color: rgba(191,147,69,.3);
        border-radius: 8/@vw;
        padding-left: 28/@vw;
        overflow: hidden;
        .box-sizing();
        .flex-y();
        .news-huabin {
          .vw-w-h(128,24);
          img {
            display: block;
          }
        }
        .line {
          display: inline-block;
          width: 2/@vw;
          height: 32/@vw;
          background-color: #997637;
          opacity: 1;
          margin: 0 16/@vw;
        }
        span {
          font-size: 24/@vw;
        }
        >span:nth-of-type(2) {
          color: #f55252;
          font-weight: bold;
        }
        .swiper2 {
          height: 70/@vw;
          line-height: 70/@vw;
          margin-left: 16/@vw;
          span {
            .ellipsis();
          }
        }
      }
    }
  }
  .classification {
    width: 100%;
    padding: 13/@vw 27/@vw 0;
    .box-sizing();
    li {
      width: 50%;
      padding: 3/@vw;
      float: left;
      .box-sizing();
      a {
        display: block;
      }
    }
  }
}
/*底部导航*/
.nav {
  width: 100%;
  height: 98/@vw;
  background-color: #ffffff;
  padding: 12/@vw 0 0;
  //border-top: 1/@vw solid #ebebeb;
  .box-sizing();
  position: fixed;
  left: 0;
  bottom: 0;
  ul {
    width: 100%;
    li {
      width: 50%;
      float: left;
      a {
        display: block;
        width: 100%;
        text-align: center;
        img {
          .vw-w-h(44,44);
        }
        span {
          display: block;
          font-size: 20/@vw;
          margin-top: 10/@vw;
          color: #999999;
        }
        .nav-active {
          color: #bf9345;
        }
      }
    }
  }
}
/*奖券区、华彬区*/
.exchange {
  //padding-top: 28/@vw;
  ul {
    width: 100%;
    padding: 0 15/@vw;
    background-color: #ffffff;
    .box-sizing();
    li {
      float: left;
      width: 50%;
      padding: 30/@vw 15/@vw 20/@vw;
      border-bottom: 1/@vw solid #e5e5e5;
      .box-sizing();
      a {
        display: block;
        img {
          .vw-w-h(330,186);
        }
        p {
          font-size: 28/@vw;
          margin-bottom: 12/@vw;
          .ellipsis();
          &:nth-of-type(1) {
            color: #191919;
          }
          &:nth-of-type(2) {
            margin-bottom: 20/@vw;
            span {
              &:nth-of-type(1) {
                color: #f22727;
              }
              &:nth-of-type(2) {
                color: #999999;
                font-size: 24/@vw;
              }
            }
          }
        }
      }
      &:nth-of-type(odd) {
        border-right: 1/@vw solid #e5e5e5;
      }
    }
  }
}
/*秒杀区*/
.secondKill {
  .secondKill-title {
    width: 100%;
    height: 60/@vw;
    line-height: 60/@vw;
    text-align: center;
    p {
      font-size: 20/@vw;
      color: #666666;
      .ellipsis();
    }
  }
  .secondKill-list {
    ul {
      width: 100%;
      padding: 0 15/@vw;
      background-color: #ffffff;
      .box-sizing();
      li {
        float: left;
        width: 50%;
        padding: 30/@vw 15/@vw 20/@vw;
        border-bottom: 1/@vw solid #e5e5e5;
        .box-sizing();
        a {
          display: block;
          img {
            .vw-w-h(330,186);
          }
          >p {
            font-size: 28/@vw;
            margin-bottom: 12/@vw;
            .ellipsis();
            &:nth-of-type(1) {
              color: #191919;
            }
            &:nth-of-type(2) {
              margin-bottom: 20/@vw;
              span {
                &:nth-of-type(1) {
                  color: #f22727;
                }
                &:nth-of-type(2) {
                  color: #999999;
                  font-size: 24/@vw;
                }
              }
            }
          }
          .rush-to-buy {
            width: 330/@vw;
            height: 88/@vw;
            margin: 20/@vw 0 0;
            background-color: #999999;
            border-radius: 8/@vw;
            .box-sizing();
            .flex();
            .content {
              >p {
                font-size: 18/@vw;
                color: #ffffff;
                &:nth-of-type(2) {
                  margin-top: 5/@vw;
                }
              }
            }
          }
          .active {
            background-color: #DEBC57;
            .content >p {
              color: #77481C;
              font-size: 28/@vw;
            }
          }
        }
        &:nth-of-type(odd) {
          border-right: 1/@vw solid #e5e5e5;
        }
      }
    }
  }
}
/*拼团区*/
.collage {
  .collage-title {
    .secondKill .secondKill-title;
    height: 80/@vw;
    line-height: 80/@vw;
    position: relative;
    a {
      display: block;
      width: 90/@vw;
      height: 50/@vw;
      text-align: center;
      line-height: 50/@vw;
      background-color: #f55252;
      color: #ffffff;
      font-size: 24/@vw;
      border-radius: 30/@vw;
      .translateY();
      right: 30/@vw;
    }
  }
  .collage-list {
    .secondKill .secondKill-list;
    ul li a {
      img {
        .vw-w-h(330,186);
      }
      >p {
        margin-top: 20/@vw;
        margin-bottom: 0;
        &:nth-of-type(2) {
          margin-top: 12/@vw;
        }
        &:nth-of-type(3) {
          >span {
            font-size: 18/@vw;
            &:nth-of-type(1) {
              float: left;
              color: #333333;
            }
            &:nth-of-type(2) {
              float: right;
              color: #999999;
              .days {
                color: #333333;
                margin-right: 6/@vw;
              }
              .time {
                .vw-w-h(34,24);
                text-align: center;
                line-height: 24/@vw;
                display: inline-block;
                color: #383838;
                border: 1/@vw solid #c2c2c2;
                border-radius: 4/@vw;
                margin: 0 6/@vw;
              }
            }
          }
        }
      }
      .progress {
        margin-top: 20/@vw;
        font-size: 18/@vw;
        >span {
          float: left;
          color: #333333;
        }
        .progress-right {
          float: right;
          .vw-w-h(238,24);
          border-radius: 12/@vw;
          background-color: #fb8686;
          text-align: center;
          line-height: 24/@vw;
          color: #ffffff;
          position: relative;
          .progress-value {
            position: absolute;
            top: 0;
            left: 0;
            .vw-w-h(120,24);
            border-radius: 12/@vw;
            background-color: #f55252;
          }
          >p {
            position: absolute;
            .translate();
          }
        }
      }
      .rush-to-buy {
        margin-top: 30/@vw;
        .content >p {
          font-size: 32/@vw;
        }
      }
    }
  }
}
/*商品详情*/
.detail {
  width: 100%;
  .detail-header {
    width: 100%;
  }
  .detail-title {
    width: 100%;
    height: 186/@vw;
    background-color: #ffffff;
    padding: 20/@vw 30/@vw 0;
    position: relative;
    .box-sizing();
    >p {
      font-size: 42/@vw;
      color: #333333;
      &:nth-of-type(1) {
        color: #f22727;
        font-size: 30/@vw;
        span {
          font-size: 52/@vw;
        }
      }
      &:nth-of-type(2) {
        font-weight: bold;
      }
    }
    .count-down {
      text-align: center;
      position: absolute;
      right: 30/@vw;
      top: 10/@vw;
      p {
        .flex();
        color: #666666;
        &:nth-of-type(1) {
          font-size: 18/@vw;
        }
        &:nth-of-type(2) {
          font-size: 24/@vw;
          margin-top: 10/@vw;
          span {
            color: #333333;
            &:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4) {
              .vw-w-h(46,34);
              line-height: 34/@vw;
              display: inline-block;
              border: 1/@vw solid #bf9345;
              border-radius: 4/@vw;
            }
          }
        }
      }
    }
  }
  .collage-num {
    width: 100%;
    height: 140/@vw;
    background-color: #ffffff;
    padding: 0 30/@vw;
    margin-top: 6/@vw;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    .box-sizing();
    .collage-num-txt {
      p {
        &:nth-of-type(1) {
          font-size: 28/@vw;
          color: #333333;
          font-weight: bold;
        }
        &:nth-of-type(2) {
          margin-top: 18/@vw;
          font-size: 18/@vw;
          color: #666666;
        }
      }
    }
    .num {
      .vw-w-h(150,84);
      text-align: center;
      line-height: 84/@vw;
      color: #333333;
      font-weight: bold;
      font-size: 32/@vw;
      border: 1/@vw solid #f4f4f4;
      border-radius: 8/@vw;
    }
  }
  .detail-address {
    background-color: #ffffff;
    margin-top: 6/@vw;
    padding: 30/@vw;
    a {
      display: block;
    }
    .address-top {
      .flex-y();
      justify-content: space-between;
      -webkit-justify-content: space-between;
      .address-top-left {
        .flex-y();
        span {
          &:nth-of-type(1) {
            color: #999999;
            font-size: 28/@vw;
          }
          &:nth-of-type(2),&:nth-of-type(3) {
            color: #333333;
            font-size: 24/@vw;
            margin-left: 20/@vw;
          }
          &:nth-of-type(2) {
            margin-left: 5/@vw;
          }
        }
      }
      .address-top-right {
        img {
          display: block;
          .vw-w-h(36,14);
        }
      }
    }
    .address-bottom {
      .flex-y();
      margin-top: 18/@vw;
      .address-bottom-left {
        margin-left: 68/@vw;
        img {
          display: block;
          .vw-w-h(30,36);
        }
      }
      .address-bottom-right {
        margin-left: 20/@vw;
        //.ellipsis();
        font-size: 24/@vw;
        color: #666666;
      }
    }
  }
  .detail-txt1 {
    margin-top: 24/@vw;
    padding: 42/@vw 30/@vw 42/@vw;
    background-color: #ffffff;
    p {
      font-size: 24/@vw;
      color: #333333;
      letter-spacing: 1px;
      &:nth-of-type(1) {
        font-weight: bold;
        letter-spacing: 2/@vw;
      }
      &:nth-of-type(2),&:nth-of-type(3) {
        margin-top: 30/@vw;
      }
    }
  }
  .detail-txt2 {
    width: 100%;
    background-color: #ffffff;
    margin-top: 6/@vw;
    padding: 26/@vw 30/@vw;
    letter-spacing: 1px;
    .box-sizing();
    p {
      &:nth-of-type(1) {
        font-size: 28/@vw;
        color: #999999;
      }
      &:nth-of-type(2) {
        font-size: 24/@vw;
        color: #333333;
        margin-top: 28/@vw;
      }
    }
  }
  .phoneNum {
    width: 100%;
    height: 98/@vw;
    .box-sizing();
    .flex-y();
    background-color: #ffffff;
    margin-top: 24/@vw;
    padding: 0 30/@vw;
    font-size: 26/@vw;
    color: #333333;
    input {
      margin-top: -6/@vw;
      margin-left: 60/@vw;
      font-size: 32/@vw;
    }
  }
  .btn-exchange {
    display: block;
    .vw-w-h(690,100);
    background-color: #DEBC57;
    border-radius: 8/@vw;
    margin: 42/@vw auto 0;
    font-size: 32/@vw;
    color: #77481C;
    font-weight: bold;
    letter-spacing: 2/@vw;
  }
}
/*编辑收货地址*/
.receive-address {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  form {
    width: 100%;
    padding: 0 30/@vw;
    .box-sizing();
    ul {
      width: 100%;
      li {
        width: 100%;
        border-bottom: 1/@vw solid #e5e5e5;
        font-size: 28/@vw;
        position: relative;
        &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
          height: 88/@vw;
          .flex-y();
          label {
            color: #333333;
            .translateY();
          }
          input {
            width: 100%;
            font-size: 28/@vw;
            padding-left: 196/@vw;
            .box-sizing();
            &::-webkit-input-placeholder {
              color: #999999;
            }
          }
        }
        &:nth-of-type(3) {
          input::-webkit-input-placeholder {
            color: #666666;
          }
        }
        &:nth-of-type(4) {
          .box-sizing();
          label {
            display: block;
            margin-top: 23/@vw;
          }
          textarea {
            width: 100%;
            border: none;
            font-size: 28/@vw;
            height: 100/@vw;
            margin-top: 46/@vw;
            &::-webkit-input-placeholder {
              color: #999999;
            }
          }
        }
      }
    }
    .save-address {
      width: 100%;
      margin-top: 50/@vw;
      input {
        font-size: 32/@vw;
        border-radius: 8/@vw;
        -webkit-appearance : none;//清除iOS默认样式
        &:nth-of-type(1) {
          .vw-w-h(430,100);
          color: #77481C;
          background-color: #DEBC57;
          float: left;
        }
        &:nth-of-type(2) {
          .vw-w-h(240,100);
          color: #363636;
          background-color: #ffffff;
          border: 2/@vw solid #999999;
          float: right;
        }
      }
    }
  }
}

/********无效********************************/
/*积分兑换-奖券*/
.exchange-lottery {
  width: 100%;
  .title {
    height: 186/@vw;
    background-color: #ffffff;
    padding: 20/@vw 30/@vw 0;
    .box-sizing();
    >p {
      font-size: 42/@vw;
      color: #333333;
      &:nth-of-type(1) {
        color: #f22727;
        font-size: 30/@vw;
        span {
          font-size: 52/@vw;
        }
      }
      &:nth-of-type(2) {
        font-weight: bold;
      }
    }
  }
  .detail {
    margin-top: 24/@vw;
    padding: 42/@vw 30/@vw 42/@vw;
    background-color: #ffffff;
    p {
      font-size: 24/@vw;
      color: #333333;
      letter-spacing: 1px;
      &:nth-of-type(1) {
        font-weight: bold;
        letter-spacing: 2/@vw;
      }
      &:nth-of-type(2),&:nth-of-type(3) {
        margin-top: 30/@vw;
      }
    }
  }
  .btn-exchange {
    display: block;
    .vw-w-h(690,100);
    background-color: #DEBC57;
    border-radius: 8/@vw;
    margin: 42/@vw auto 0;
    font-size: 32/@vw;
    color: #77481C;
    font-weight: bold;
    letter-spacing: 2/@vw;
  }
}
/*积分兑换-实物*/
.exchange-practicality {
  width: 100%;
  .title {
    .exchange-lottery .title;
  }
  .address {
    background-color: #ffffff;
    margin-top: 6/@vw;
    padding: 30/@vw;
    .address-top {
      .flex-y();
      justify-content: space-between;
      -webkit-justify-content: space-between;
      .address-top-left {
        .flex-y();
        span {
          &:nth-of-type(1) {
            color: #999999;
            font-size: 28/@vw;
          }
          &:nth-of-type(2),&:nth-of-type(3) {
            color: #333333;
            font-size: 24/@vw;
            margin-left: 20/@vw;
          }
          &:nth-of-type(2) {
            margin-left: 5/@vw;
          }
        }
      }
      .address-top-right {
        img {
          display: block;
          .vw-w-h(36,14);
        }
      }
    }
    .address-bottom {
      .flex-y();
      margin-top: 18/@vw;
      .address-bottom-left {
        margin-left: 68/@vw;
        img {
          display: block;
          .vw-w-h(30,36);
        }
      }
      .address-bottom-right {
        margin-left: 20/@vw;
        //.ellipsis();
        font-size: 24/@vw;
        color: #666666;
      }
    }
  }
  .detail {
    width: 100%;
    background-color: #ffffff;
    margin-top: 6/@vw;
    padding: 26/@vw 30/@vw;
    letter-spacing: 1px;
    .box-sizing();
    p {
      &:nth-of-type(1) {
        font-size: 28/@vw;
        color: #999999;
      }
      &:nth-of-type(2) {
        font-size: 24/@vw;
        color: #333333;
        margin-top: 28/@vw;
      }
    }
  }
  .btn-exchange {
    .exchange-lottery .btn-exchange;
  }
}
/*秒杀*/
.seckill {
  .title {
    position: relative;
    .count-down {
      text-align: center;
      position: absolute;
      right: 30/@vw;
      top: 10/@vw;
      p {
        .flex();
        color: #666666;
        &:nth-of-type(1) {
          font-size: 18/@vw;
        }
        &:nth-of-type(2) {
          font-size: 24/@vw;
          margin-top: 10/@vw;
          span {
            color: #333333;
            &:nth-of-type(3),&:nth-of-type(4),&:nth-of-type(5) {
              .vw-w-h(46,34);
              line-height: 34/@vw;
              display: inline-block;
              border: 1/@vw solid #bf9345;
              border-radius: 4/@vw;
            }
          }
        }
      }
    }
  }
}
/*拼团*/
.collage-detail-page {
  .title {
    .count-down {
      p {
        &:nth-of-type(2) {
          span {
            &:nth-of-type(2) {
              .vw-w-h(46,34);
              line-height: 34/@vw;
              display: inline-block;
              border: 1/@vw solid #bf9345;
              border-radius: 4/@vw;
            }
          }
        }
      }
    }
  }
  .collage-num {
    width: 100%;
    height: 140/@vw;
    background-color: #ffffff;
    padding: 0 30/@vw;
    margin-top: 6/@vw;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    .box-sizing();
    .collage-num-txt {
      p {
        &:nth-of-type(1) {
          font-size: 28/@vw;
          color: #333333;
          font-weight: bold;
        }
        &:nth-of-type(2) {
          margin-top: 18/@vw;
          font-size: 18/@vw;
          color: #666666;
        }
      }
    }
    .num {
      .vw-w-h(150,84);
      text-align: center;
      line-height: 84/@vw;
      color: #333333;
      font-weight: bold;
      font-size: 32/@vw;
      border: 1/@vw solid #f4f4f4;
      border-radius: 8/@vw;
    }
  }
  .btn-collage {
    .exchange-practicality .btn-exchange;
  }
}
/********无效********************************/

/*拼团成员*/
.collage-members {
  padding-bottom: 100/@vw;
  .title {
    .exchange-lottery .title;
    position: relative;
    .count-down {
      .seckill .title .count-down;
      .collage-detail-page .title .count-down;
    }
  }
  .collage-members-word {
    width: 100%;
    height: 80/@vw;
    line-height: 80/@vw;
    padding: 0 30/@vw;
    font-size: 28/@vw;
    color: #333333;
    .box-sizing();
  }
  .collage-members-list {
    background-color: #ffffff;
    ul {
      width: 100%;
      padding: 0 30/@vw;
      .box-sizing();
      li {
        width: 100%;
        height: 120/@vw;
        border-bottom: 1/@vw dashed #e5e5e5;
        display: flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        align-items: center;
        -webkit-align-items: center;
        .collage-members-list-left {
          .flex-y();
          .collage-members-head-portrait {
            .vw-w-h(80,80);
            border-radius: 50%;
            overflow: hidden;
            background-color: #ffffff;
            position: relative;
            img {
              &:nth-of-type(2) {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.9;
              }
            }
          }
          .collage-members-information {
            margin-left: 30/@vw;
            p {
              font-size: 28/@vw;
              &:nth-of-type(1) {
                color: #333333;
                letter-spacing: 1px;
                span {
                  font-weight: bold;
                  color: #f22727;
                }
              }
              &:nth-of-type(2) {
                margin-top: 15/@vw;
                color: #999999;
              }
            }
          }
        }
        .collage-members-list-right {
          font-size: 28/@vw;
          color: #999999;
          span {
            font-size: 32/@vw;
            color: #333333;
            font-weight: bold;
          }
        }
      }
    }
  }
  .btn-collage-fixed {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    button {
      .exchange-practicality .btn-exchange;
      margin: 0 auto;
    }
  }
}

/*我的*/
.mine {
  padding-bottom: 98/@vw;
  .header {
    width: 100%;
    height: 310/@vw;
    background: url("../images/mine/my_bg@2x.png") no-repeat;
    background-size: cover;
    position: relative;
    .cont {
      width: 100%;
      height: 216/@vw;
      padding: 0 30/@vw;
      .box-sizing();
      .flex-y();
      justify-content: space-between;
      -webkit-justify-content: space-between;
      .cont-left {
        .flex-y();
        .head-portrait {
          .vw-w-h(124,124);
          border-radius: 50%;
          overflow: hidden;
          background-color: #ffffff;
        }
        .cont-left-txt {
          margin-left: 20/@vw;
          p {
            color: #ffffff;
            &:nth-of-type(1) {
              font-size: 36/@vw;
            }
            &:nth-of-type(2) {
              font-size: 28/@vw;
              margin-top: 14/@vw;
              span {
                font-size: 36/@vw;
              }
            }
          }
        }
      }
      .cont-right {
        button {
          .vw-w-h(200,68);
          font-size: 36/@vw;
          color: #774b1c;
          background-color: #deb551;
          border-radius: 8/@vw;
        }
      }
    }
    .card {
      .vw-w-h(728,320);
      background: url("../images/mine/current_jifen@2x.png") no-repeat;
      background-size: cover;
      margin: 0 auto;
      text-align: center;
      .translateX();
      >ul {
        width: 670/@vw;
        height: 98/@vw;
        margin: 20/@vw auto 0;
        >li {
          float: left;
          width: 25%;
          height: 98/@vw;
          line-height: 98/@vw;
          text-align: center;
          >img {
            .vw-w-h(86,98);
          }
        }
      }
      .progress {
        margin-top: 10/@vw;
        .progress-bar {
          .vw-w-h(670,12);
          border-radius: 6/@vw;
          background-color: #ccb880;
          margin: 0 auto;
          .progress-val {
            .vw-w-h(200,12);
            background-color: #bf9345;
            border-radius: 6/@vw;
          }
        }
        .progress-num {
          width: 670/@vw;
          font-size: 24/@vw;
          color: #333333;
          margin: 0 auto;
          span {
            width: 20%;
            display: inline-block;
            text-align: left;
            &:nth-of-type(3) {
              text-align: center;
            }
            &:nth-of-type(4) {
              text-align: right;
            }
            &:last-child {
              text-align: right;
            }
          }
        }
        .line {
          width: 690/@vw;
          height: 1/@vw;
          background-color: #e5e5e5;
          margin: 40/@vw auto 0;
        }
        p {
          font-size: 28/@vw;
          color: #bf9345;
          line-height: 80/@vw;
          .flex();
          span {
            font-size: 36/@vw;
            font-weight: bold;
          }
        }
      }
    }
  }
  .list {
    width: 100%;
    padding: 226/@vw 0 0;
    background-color: #ffffff;
    ul {
      width: 100%;
      padding: 0 30/@vw;
      .box-sizing();
      li {
        width: 100%;
        height: 88/@vw;
        border-bottom: 1/@vw solid #e5e5e5;
        .flex-y();
        a {
          width: 100%;
          height: 88/@vw;
          .flex-y();
          justify-content: space-between;
          -webkit-justify-content: space-between;
          .list-left {
            font-size: 24/@vw;
            color: #333333;
            .flex-y();
            img {
              .vw-w-h(34,34);
            }
            span {
              margin-left: 30/@vw;
            }
          }
          .list-right {
            .flex-y();
            img {
              .vw-w-h(16,26);
            }
          }
        }
      }
    }
  }
}
/*签到*/
.sign-in {
  .header {
    width: 100%;
    height: 410/@vw;
    background: url("../images/mine/bg02@2x.png") no-repeat;
    background-size: cover;
    text-align: center;
    >img {
      .vw-w-h(494,90);
      margin-top: 120/@vw;
    }
    p {
      color: #999999;
      &:nth-of-type(1) {
        .flex();
        font-size: 32/@vw;
        span {
          font-size: 62/@vw;
          color: #77481C;
        }
      }
    }
    .integral-total {
      width: 494/@vw;
      .flex-y();
      justify-content: space-between;
      -webkit-justify-content: space-between;
      margin: 0 auto;
      p {
        font-size: 24/@vw;
        span {
          font-size: 32/@vw;
          color: #333333;
        }
      }
      button {
        .vw-w-h(134,46);
        color: #c09649;
        background-color: #ffffff;
        border: 2/@vw solid #c09649;
        border-radius: 8/@vw;
        font-size: 24/@vw;
      }
    }
  }
  .date-title {
    width: 100%;
    height: 90/@vw;
    line-height: 90/@vw;
    text-align: center;
    background-color: #ccb880;
    position: relative;
    &::before {
      content: '';
      .vw-w-h(14,38);
      background-color: #bf9345;
      border-radius: 8/@vw;
      display: block;
      position: absolute;
      bottom: -19/@vw;
      left: 130/@vw;
    }
    &::after {
      content: '';
      .vw-w-h(14,38);
      background-color: #bf9345;
      border-radius: 8/@vw;
      display: block;
      position: absolute;
      bottom: -19/@vw;
      right: 130/@vw;
    }
  }
  .sign-header {
    width: 100%;
    height: 88/@vw;
    padding: 19/@vw 30/@vw 0;
    .box-sizing();
    .flex();
    span {
      display: inline-block;
      width: 14.28%;
      text-align: center;
      font-size: 24/@vw;
      color: #999999;
    }
  }
  .sign-list {
    width: 100%;
    padding: 0 30/@vw;
    .box-sizing();
    li {
      width: 14.28%;
      height: 90/@vw;
      float: left;
      font-size: 24/@vw;
      color: #333333;
      .flex();
      span {
        .vw-w-h(58,58);
        .flex();
        border-radius: 50%;
      }
      .sign-day{
        background-color: #c8b791;
      }
      .today{
        background-color: #bf9345;
        color: #ffffff;
      }
    }
  }
}
/*我的积分*/
.my-integral {
  .header {
    width: 100%;
    height: 324/@vw;
    background: url("../images/mine/my-integral-bg@2x.png") no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 66/@vw;
    .box-sizing();
    .header-top {
      width: 100%;
      p {
        text-align: center;
        span {
          width: 33.3333%;
          display: inline-block;
          color: #ffffff;
          font-size: 24/@vw;
          letter-spacing: 1/@vw;
        }
        &:nth-of-type(1) {
          span {
            color: #77481C;
            font-weight: bold;
            &:nth-of-type(1) {
              font-size: 62/@vw;
            }
            &:nth-of-type(2) {
              font-size: 42/@vw;
            }
            &:nth-of-type(3) {
              font-size: 36/@vw;
            }
          }
        }
      }
    }
    .header-bottom {
      width: 100%;
      height: 102/@vw;
      padding: 0 30/@vw;
      .box-sizing();
      .flex-y();
      justify-content: space-between;
      -webkit-justify-content: space-between;
      position: absolute;
      bottom: 0;
      p {
        font-size: 32/@vw;
        letter-spacing: 1/@vw;
      }
      button {
        .vw-w-h(158,50);
        font-size: 24/@vw;
        color: #77481C;
        background-color: #DEBC57;
        border-radius: 8/@vw;
      }
    }
  }
  .integral-list {
    background-color: #ffffff;
    >ul {
      >li {
        height: 100/@vw;
        line-height: 100/@vw;
        font-size: 24/@vw;
        color: #999999;
        >ul {
          >li {
            float: left;
            width: 25%;
            text-align: center;
            &:nth-of-type(2) {
              width: 50%;
            }
            &:nth-of-type(3) {
              font-size: 32/@vw;
              color: #f22727;
            }
          }
        }
        &:nth-of-type(1) {
          height: 84/@vw;
          line-height: 84/@vw;
          >ul {
            >li {
              font-size: 24/@vw;
              color: #333333;
            }
          }
        }
      }
    }
  }
}
.wraper-integral {
  top: 324/@vw;
}
/*个人资料*/
.personal-data {
  .header {
    width: 100%;
    height: 310/@vw;
    background: url("../images/mine/gerenzhuce_bg@2x.png") no-repeat;
    background-size: cover;
    padding-top: 66/@vw;
    .box-sizing();
    .head-portrait {
      .vw-w-h(124,124);
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;
      background-color: #ffffff;
    }
    p {
      text-align: center;
      font-size: 24/@vw;
      color: #77481C;
      margin-top: 30/@vw;
      span {
        font-size: 30/@vw;
        font-weight: bold;
      }
    }
  }
  .personal-data-list {
    width: 100%;
    ul {
      width: 100%;
      padding: 0 30/@vw;
      background-color: #ffffff;
      .box-sizing();
      li {
        width: 100%;
        height: 88/@vw;
        border-bottom: 1/@vw solid #e5e5e5;
        .flex-y();
        a {
          width: 100%;
          height: 88/@vw;
          .flex-y();
          justify-content: space-between;
          -webkit-justify-content: space-between;
          .list-left {
            font-size: 24/@vw;
            color: #333333;
            .flex-y();
            img {
              .vw-w-h(34,34);
            }
            span {
              margin-left: 30/@vw;
            }
          }
          .list-right {
            .flex-y();
            span {
              font-size: 24/@vw;
              color: #999999;
            }
            img {
              .vw-w-h(16,26);
              margin-left: 16/@vw;
            }
          }
        }
      }
      &:nth-of-type(2) {
        margin-top: 24/@vw;
      }
    }
  }
}
/*个人注册*/
.rigister {
  width: 100%;
  padding-top: 40/@vw;
  .phone {
    padding: 0 30/@vw;
    .box-sizing();
    >p {
      font-size: 36/@vw;
      color: #333333;
    }
    ul {
      li {
        width: 100%;
        height: 110/@vw;
        border-bottom: 1px solid #e5e5e5;
        font-size: 30/@vw;
        color: #333333;
        position: relative;
        label {
          position: absolute;
          left: 0;
          bottom: 16/@vw;
          z-index: 2;
        }
        input {
          width: 100%;
          font-size: 32/@vw;
          padding-left: 120/@vw;
          position: absolute;
          left: 0;
          bottom: 16/@vw;
          z-index: 1;
          .box-sizing();
        }
        &:nth-of-type(2) {
          input {
            padding-right: 168/@vw;
          }
          button {
            .vw-w-h(168,60);
            font-size: 24/@vw;
            color: #77481C;
            background-color: #DEBC57;
            border-radius: 8/@vw;
            position: absolute;
            right: 0;
            bottom: 20/@vw;
            z-index: 2;
          }
        }
      }
    }
  }
  .label {
    width: 100%;
    margin-top: 60/@vw;
    .label-header {
      padding: 0 30/@vw 20/@vw;
      .box-sizing();
      display: flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      >p {
        font-size: 36/@vw;
        color: #333333;
      }
      .change {
        .flex-y();
        img {
          .vw-w-h(28,28);
        }
        span {
          font-size: 28/@vw;
          color: #77481C;
          margin-left: 6/@vw;
        }
      }
    }
    ul {
      width: 100%;
      margin-bottom: 1/@vw;
      li {
        width: 33.33%;
        height: 72/@vw;
        float: left;
        margin-top: 40/@vw;
        padding: 0 30/@vw;
        .box-sizing();
        span {
          width: 100%;
          line-height: 68/@vw;
          display: inline-block;
          border-radius: 8/@vw;
          color: #333333;
          border: 1/@vw solid #999999;
          font-size: 28/@vw;
          text-align: center;
        }
        .active {
          color: #c09649;
          border: 1/@vw solid #DEBC57;
        }
      }
    }
  }
  .btn-submit {
    text-align: center;
    >button {
      .vw-w-h(550,98);
      height: 98/@vw;
      font-size: 36/@vw;
      color: #ffffff;
      background-color: #999999;
      border-radius: 8/@vw;
      letter-spacing: 10/@vw;
      margin-top: 100/@vw;
    }
    .active {
      color: #77431c;
      background-color: #edbc57;
    }
  }
}
/*兑换记录*/
.record {
  width: 100%;
  .header {
    width: 100%;
    ul {
      width: 100%;
      background-color: #ffffff;
      li {
        width: 25%;
        height: 88/@vw;
        text-align: center;
        float: left;
        span {
          display: inline-block;
          height: 88/@vw;
          line-height: 88/@vw;
          font-size: 28/@vw;
        }
      }
    }
  }
  .record-list {
    ul {
      li {
        width: 100%;
        background-color: #ffffff;
        margin-top: 24/@vw;
        padding: 36/@vw 30/@vw;
        .box-sizing();
        .record-list-top {
          .flex-y();
          .record-list-top-left {
            .vw-w-h(328,170);
            overflow: hidden;
          }
          .record-list-top-right {
            width: 332/@vw;
            margin-left: 30/@vw;
            p {
              font-size: 24/@vw;
              color: #999999;
              &:nth-of-type(1) {
                font-size: 30/@vw;
                color: #333333;
              }
              &:nth-of-type(2) {
                margin-top: 20/@vw;
              }
              &:nth-of-type(3) {
                margin-top: 27/@vw;
              }
            }
          }
        }
        .record-list-bottom {
          .flex-y();
          justify-content: space-between;
          -webkit-justify-content: space-between;
          margin-top: 42/@vw;
          .record-list-bottom-left {
            p {
              font-size: 24/@vw;
              color: #999999;
              span {
                font-size: 30/@vw;
                color: #333333;
              }
            }
          }
          .record-list-bottom-right {
            .flex-y();
            button {
              .vw-w-h(156,50);
              font-size: 24/@vw;
              color: #333333;
              background-color: #ffffff;
              border-radius: 8/@vw;
              border: 1/@vw solid #333333;
            }
            a {
              .vw-w-h(156,50);
              .flex();
              font-size: 24/@vw;
              border-radius: 8/@vw;
              color: #77481C;
              background-color: #DEBC57;
              margin-left: 10/@vw;
            }
          }
        }
      }
    }
  }
  .nothing {
    display: none;
    margin: 300/@vw auto 0;
    text-align: center;
    img {
      .vw-w-h(236,142);
    }
    p {
      margin-top: 50/@vw;
    }
  }
}
/*兑换记录导航高亮样式*/
.record-active {
  span {
    border-bottom: 1/@vw solid #bf9345;
    color: #bf9345;
  }
}
.record-noReceive, .record-complete, .record .record-cancel {
  display: none;
}
/*订单详情*/
.order-detail {
  padding-top: 24/@vw;
  .header {
    background-color: #ffffff;
    padding: 30/@vw 30/@vw 0;
    .box-sizing();
    .header-top {
      .flex-y();
      .header-top-left {
        .vw-w-h(240,240);
        overflow: hidden;
        .flex-y();
      }
      .header-top-right {
        width: 426/@vw;
        margin-left: 30/@vw;
        p {
          font-size: 24/@vw;
          color: #999999;
          &:nth-of-type(1) {
            font-size: 30/@vw;
            color: #333333;
          }
          &:nth-of-type(2), &:nth-of-type(3) {
            margin-top: 24/@vw;
          }
          &:nth-of-type(4) {
            font-size: 28/@vw;
            color: #bf9345;
            margin-top: 36/@vw;
          }
        }
      }
    }
    .header-bottom {
      height: 88/@vw;
      line-height: 88/@vw;
      margin-top: 30/@vw;
      border-top: 1/@vw solid #e5e5e5;
      p {
        font-size: 24/@vw;
        color: #999999;
      }
    }
    .cam {
      height: 88/@vw;
      font-size: 24/@vw;
      color: #999999;
      display: flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      button {
        .vw-w-h(118,50);
        font-size: 24/@vw;
        color: #77481C;
        background-color: #deba57;
        border-radius: 8/@vw;
      }
    }
  }
  .logistics-information {
    margin-top: 24/@vw;
    background-color: #ffffff;
    padding: 36/@vw 30/@vw;
    .logistics-title {
      .vw-w-h(262,62);
      margin: 0 auto;
    }
    .logistics-list {
      margin-top: 36/@vw;
      ul {
        li {
          display: flex;
          color: #999999;
          .logistics-list-left {
            width: 180/@vw;
            text-align: center;
            font-size: 24/@vw;
            color: #999999;
            border-right: 2/@vw solid #dddddd;
            padding-right: 30/@vw;
            padding-bottom: 60/@vw;
            .box-sizing();
            position: relative;
            .logistics-times {
              span {
                display: block;
                &:nth-of-type(2) {
                  margin-top: 20/@vw;
                }
              }
            }
            &::after {
              content: '';
              display: block;
              .vw-w-h(24,24);
              background-color: #dddddd;
              border-radius: 50%;
              position: absolute;
              right: -12/@vw;
              top: 0;
              z-index: 1;
            }
            .order-finish {
              //display: none;
              .vw-w-h(40,40);
              position: absolute;
              top: 0;
              right: -20/@vw;
              z-index: 2;
            }
          }
          .logistics-list-right {
            width: 450/@vw;
            margin-left: 30/@vw;
            font-size: 24/@vw;
          }
          &:first-child {
            color: #333333;
            .logistics-list-left {
              .logistics-times {
                span {
                  color: #333333;
                }
              }
            }
          }
          &:last-child {
            .logistics-list-left {
              border: none;
            }
          }
        }
      }
    }
  }
  .cancel-information {
    .detail .detail-address;
    margin-top: 24/@vw;
    .tip {
      display: flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      padding-top: 30/@vw;
      margin-top: 30/@vw;
      border-top: 1/@vw solid #e5e5e5;
      p {
        &:nth-of-type(1) {
          width: 200/@vw;
          font-size: 28/@vw;
          color: #999999;
        }
        &:nth-of-type(2) {
          font-size: 24/@vw;
          color: #333333;
        }
      }
    }
  }
}
/*积分规则*/
.rule {
  width: 100%;
  padding: 24/@vw 30/@vw 0;
  .box-sizing();
}


/*通用弹窗*/
.popup {
  //display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 10;
  .pop-body {
    .vw-w-h(580,360);
    background-color: #ffffff;
    border-radius: 20/@vw;
    padding: 110/@vw 30/@vw 0;
    .box-sizing();
    .translate();
    text-align: center;
    p {
      font-size: 32/@vw;
      color: #333333;
      font-weight: bold;
      letter-spacing: 1px;
      img {
        display: inline-block;
        .vw-w-h(52,52);
        margin-right: 20/@vw;
      }
    }
    button {
      .vw-w-h(280,98);
      background-color: #DEBC57;
      border-radius: 8/@vw;
      color: #77481C;
      font-size: 36/@vw;
      font-weight: bold;
      letter-spacing: 1px;
      margin-top: 58/@vw;
    }
  }
}
/*询问弹窗*/
.confirm-popup {
  .pop-body {
    button {
      .vw-w-h(240,98);
      &:nth-of-type(1) {
        float: left;
        border: 2/@vw solid #999999;
        color: #333333;
        background-color: #ffffff;
      }
      &:nth-of-type(2) {
        float: right;
      }
    }
  }
}
/*拼团失败弹窗*/
.popup-error2 {
  .pop-body {
    padding-top: 62/@vw;
    p {
      &:nth-of-type(2) {
        margin-top: 28/@vw;
      }
    }
    button {
      margin-top: 38/@vw;
    }
  }
}
/*签到弹窗*/
.signIn-popup {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
  .popup-body {
    .vw-w-h(580,546);
    margin: 180/@vw auto 0;
    position: relative;
    >img {
      display: block;
      .vw-w-h(458,458);
      margin: 0 auto;
      animation: rotating 5s linear infinite;
      -webkit-animation: rotating 5s linear infinite;
    }
    .popup-cont {
      .vw-w-h(580,360);
      background-color: #ffffff;
      border-radius: 20/@vw;
      position: absolute;
      bottom: 0;
      img {
        display: block;
        .vw-w-h(408,252);
        margin: -86/@vw auto 0;
      }
      p {
        font-size: 62/@vw;
        color: #333333;
        margin-top: 50/@vw;
        text-align: center;
        span {
          font-size: 64/@vw;
          color: #77481C;
        }
      }
    }
  }
  .drifting {
    .vw-w-h(717,503);
    .translateX();
    top: 202/@vw;
  }
}
/*定义旋转动画*/
@keyframes rotating{
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/*loading*/
.loading {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  .loading-body {
    .vw-w-h(200,200);
    background-color: rgba(0,0,0,0.8);
    border-radius: 10/@vw;
    .translate();
    img {
      .vw-w-h(80,80);
      .translate();
    }
  }
}
